<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
  <style type="text/css">
      #tab{width:520px;height:480px;background-color:#ccc;}
     #tab .active{background:red;width:100px;height:110px;float: left;
        list-style: none;cursor: pointer;}
      #tab ul{width:450px;height:350px;}
      #tab ul li{width:100px;height:110px;float: left;
        list-style: none;cursor: pointer;border:solid;margin:2px;}
      #tab ul li h2{width:80px;height:40px;text-align:center;margin-left:10px;}
      #tab ul li p{width:80px;height:30px;margin-left:10px;margin-top:-20px;text-align:center;}
      #tab .text{
      width:435px;height:100px;background-color:green;margin-left:40px;border:solid;}
  </style>
	<script type="text/javascript">
	      window.onload=function (){
          var arr=[
              '快过年了,大家可以商量着去哪玩了吧,养肾防寒',
              '二月,阳气生发，适当春捂',
              '三月,晚睡早起，食甜养肝',
              '四月,调节阴阳','五月,关注心脏',
              '六月,晚睡早起','七月,劳逸结合，保护阳气',
              '八月,神志安宁','九月,阴平阳秘，防秋燥',
              '十月,控制情绪，养阴精','十一月,早睡晚起，保护阳气',
              '十二月,适度进补，动静结合'
          ]
          var oDiv=document.getElementById('tab');
          var aLi=oDiv.getElementsByTagName('li');
          // var oTxt=oDiv.getElementsByTagName('div')[0];
          var oTxt=document.getElementById('div2');
          for(var i=0;i<aLi.length;i++){
                  aLi[i].index=i;
                  aLi[i].onmouseover=function(){
                  for(var j=0;j<aLi.length;j++){
                    aLi[j].className='';
                    //alert(aLi[j].className);
                  }
                    this.className='active';
                    // alert(this.className);
                    oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
              }
          }
        }
	</script>
</head>
<body>
      <div id="tab" class="calendar">
        <ul>
          <li class="active"><h2>1</h2><p>JAN</p></li>
          <li><h2>2</h2><p>FER</p></li>
          <li><h2>3</h2><p>MAR</p></li>
          <li><h2>4</h2><p>APR</p></li>
          <li><h2>5</h2><p>MAY</p></li>
          <li><h2>6</h2><p>JUN</p></li>
          <li><h2>7</h2><p>AUG</p></li>
          <li><h2>8</h2><p>SEP</p></li>
          <li><h2>9</h2><p>SEP</p></li>
          <li><h2>10</h2><p>SEP</p></li>
          <li><h2>11</h2><p>SEP</p></li>
          <li><h2>12</h2><p>SEP</p></li>
        </ul>
        <div class="text" id="div2">
          <h2>1月活动</h2>
          <p>快过年了,大家可以商量着去哪玩了!</p>
        </div>
      </div>
</body>
</html>